<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <!--    引入vue 路由-->
    <script src="../vue/vue-router.js"></script>
</head>
<body>

<!--
   路由参数获取：
      1. queryString       /user/login?username=tom&password=123456
      2. path             /user/delete/1       restful设计风格

-->

<div id="app">
    <!--    路由出口-->
    <h1>路由匹配组件</h1>
    <router-view></router-view>
    <h2>路由切换方式2 to=string </h2>
    <router-link to="/login?username=tom&password=123456">登录组件</router-link>
    <router-link to="/register/xiaoming/666666">注册组件</router-link>
    <hr>
    <h2>路由切换方式3 :to={path}</h2>
    <router-link :to="{path:'/login',query:{username:'xiaoming',password:'123456'}}">登录组件</router-link>
    <router-link :to="{path:'/register'}">注册组件</router-link>

    <hr>
    <h2>路由切换方式4 :to={name}</h2>
    <router-link :to="{name:'login',query:{username:'python2512',password:'123456'}}">登录组件</router-link>
    <router-link :to="{name:'register',params:{username:'python',password:'123456'}}">注册组件</router-link>

</div>

<script>
    // 定义登录组件
    let login = {
        template: `
          <div>
                <h2>登录</h2>
                <form action="#" method="get">
                    <p><input type="text" name="username" placeholder="请输入用户名"  v-model="username"></p>
                    <p><input type="password" name="password" placeholder="请输入密码" v-model="password"></p>
                    <p><input type="submit" value="登录"></p>
                </form>
            </div>
        `,
        data(){
            return{
                username:'',
                password:''
            }
        },
        created(){
            console.log('login 组件对象被创建')
            // 获取路由参数  queryString  ?   this.$route   路由对象
            console.log(this.$route.query)
            console.log('username=',this.$route.query.username)
            console.log('password=',this.$route.query.password)
            // es6 对象解构赋值  {username: 'tom', password: '123456'}
            let {username,password} = this.$route.query
            this.username = username
            this.password = password
        },
        destroyed(){
            console.log('login 组件对象被销毁')
        }
    }
    // 注册组件
    let register = {
        template: `
          <div>
                <h2>注册</h2>
                <form action="#" method="get">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit" value="注册"></p>
                </form>
            </div>
        `,
        created(){
            console.log('register 组件对象被创建')
            // 获取路由参数   path
            console.log(this.$route.params)
            let {username,password} = this.$route.params
            console.log(username)
            console.log(password)

        },
    }

    // 2. 定义路由列表    映射关系
    const routes = [
        {path: '/', redirect:'/login'},
        {path: '/login', component: login, name: "login"},
        {path: '/register/:username/:password", component: register, name: 'register'}
    ]

    // 3. 实例化路由管理对象
    const router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login(){
                // 切换路由
                console.log(this.$router)
                // this.$router.push('/login')
                this.$router.push({path:'/login'})
            },
            register(){
                // 切换路由   this.$router  路由管理对象  切换路由
                console.log(this.$router)
                // this.$router.push('/register')
                this.$router.push({name:'register'})
            }
        },
        router   //  建立vm实例和router的关系
    })

</script>


</body>
</html>

